<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import NoteCard, { Note } from 'src/components/NoteCard.vue'
import NoteContainer, { NoteDialog } from 'src/components/NoteContainer.vue'
import { useAuthStore } from 'src/stores/authStore'
import { storeToRefs } from 'pinia'
import { getAllNotes } from 'src/api'

const notes = ref<Note[]>([])
const { certified, showLoginDialog } = storeToRefs(useAuthStore())

onMounted(async () => {
  if (!certified.value) showLoginDialog.value = true
  // notes.value.push(
  //   {
  //     id: 0,
  //     cover:
  //       'https://th.bing.com/th/id/OIP.vXbRIX-hyebd2I1pViNbxQAAAA?w=115&h=181&c=7&r=0&o=5&dpr=1.3&pid=1.7',
  //     title: '集帅们，有没有一起打篮球的，我特别喜欢篮球',
  //     authorAvatar:
  //       'https://th.bing.com/th/id/OIP.-VXx0WKJoNw_KlagwAgtTAAAAA?w=218&h=208&c=7&r=0&o=5&dpr=1.3&pid=1.7',
  //     authorNickname: '小集帅坤哥1',
  //     liked: false,
  //     collected: false,
  //   },
  //   {
  //     id: 1,
  //     cover:
  //       'https://th.bing.com/th/id/OIP.KQPzhrZvPSnOsGfasY5SGwHaEO?w=273&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
  //     title: '集帅们，有没有一起跳舞的，我特别喜欢跳舞',

  //     authorAvatar:
  //       'https://th.bing.com/th/id/OIP.MO9kKuliwR3AlBcVAxgsTgHaHa?w=193&h=193&c=7&r=0&o=5&dpr=1.3&pid=1.7',
  //     authorNickname: '小集帅坤哥2',

  //     liked: false,
  //     collected: false,
  //   },
  //   {
  //     id: 2,
  //     cover:
  //       'https://www.sycmd.com/wp-content/uploads/2022/0823/f4426b0560c8e600c30bc22a9aef728b.jpg',
  //     title: '集帅们，我家giegie又被黑了',

  //     authorAvatar:
  //       'https://th.bing.com/th/id/OIP.5wG-WARXCGIHfo4Qsn1R1QHaHa?w=212&h=212&c=7&r=0&o=5&dpr=1.3&pid=1.7',
  //     authorNickname: '小集帅坤哥3',

  //     liked: false,
  //     collected: false,
  //   },
  //   {
  //     id: 3,
  //     cover:
  //       'https://th.bing.com/th/id/OIP.qUorfR24iTx6szbNSdfYGQHaEo?w=291&h=189&c=7&r=0&o=5&dpr=1.3&pid=1.7',
  //     title: '小黑子，油饼食不食',

  //     authorAvatar:
  //       'https://th.bing.com/th/id/OIP.pgcKcoMTaa73dXjSjm-6bAHaHa?w=175&h=198&c=7&r=0&o=5&dpr=1.3&pid=1.7',
  //     authorNickname: '小集帅坤哥4',
  //     liked: false,
  //     collected: false,
  //   },
  //   {
  //     id: 4,
  //     cover:
  //       'https://th.bing.com/th/id/OIP.bBFw3yYkVgHbD_FyX4SVtQHaHj?w=175&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
  //     title: '哎呦喂，你们老是针对我家giegie干嘛',
  //     authorAvatar:
  //       'https://th.bing.com/th/id/OIP.X133hdjv-9oWzZ-3jR9ngQHaHa?w=212&h=212&c=7&r=0&o=5&dpr=1.3&pid=1.7',
  //     authorNickname: '小集帅坤哥5',
  //     liked: false,
  //     collected: false,
  //   }
  // )
  await refresh()
})

const noteDialog = ref<NoteDialog>({
  showing: false,
})

// TODO:需要从后端数据加载
function loadNotes(_index: number, done: () => void) {
  done()
}

// 刷新逻辑，需要从后端加载数据
async function refresh() {
  notes.value = await getAllNotes()
}
</script>

<template>
  <!-- 浏览布局 -->
  <div>
    <q-infinite-scroll @load="loadNotes" :offset="150" class="explore-page">
      <div class="explore-container">
        <div
          v-masonry
          fit-width="true"
          transition-duration="0.3s"
          item-selector=".note"
        >
          <NoteCard
            v-for="(note, index) in notes"
            :key="index"
            v-masonry-tile
            :note="note"
            v-model:like="note.liked"
            v-model:open="noteDialog"
          />
        </div>
      </div>

      <!-- 回到顶部部件 -->
      <q-page-scroller
        position="bottom-right"
        :scroll-offset="150"
        :duration="100"
        :offset="[84, 152]"
      >
        <q-btn round color="primary" size="md" icon="arrow_upward" />
      </q-page-scroller>

      <!-- 刷新部件 -->
      <q-page-sticky position="bottom-right" :offset="[84, 76]">
        <q-btn
          round
          color="primary"
          size="md"
          icon="refresh"
          @click="refresh"
        />
      </q-page-sticky>
    </q-infinite-scroll>

    <q-dialog v-model="noteDialog.showing">
      <q-card class="card">
        <q-btn
          icon="close"
          text-color="primary"
          flat
          round
          dense
          v-close-popup
          class="close-button"
        />
        <!-- 展示 -->
        <NoteContainer
          :selectedNote="noteDialog.selectedNote!"
          v-model:like="noteDialog.selectedNote!.liked"
          v-model:collect="noteDialog.selectedNote!.collected"
        />
      </q-card>
    </q-dialog>
  </div>
</template>

<style scoped lang="scss">
.explore-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
  min-height: 100vh;

  .explore-container {
    @media (min-width: 1366px) {
      width: 1160px;
    }

    @media (min-width: 1160px) and (max-width: 1365px) {
      width: 930px;
    }

    @media (min-width: 0) and (max-width: 1160px) {
      width: 700px;
    }
  }
}

.close-button {
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>
